<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>

        textarea{
            width: 500px;
            height: 300px;
            /* 不可拖拽更改大小 */
            resize: none;
            /* 去掉焦点边框 */
            outline: none;
        }

    </style>
</head>
<body>

    <!--form表单,提交的时候会一柄整合表单中的所有填写的数据，**一次性**的发送到服务器-->
    <form action="" method="post">

        <!-- 各种文本框只是type不同，比如单选按钮的type就是radio -->
        文本框: <input type="text" placeholder="请输入用户名">
        <br><br>
        密码框: <input type="password" placeholder="请输入密码">
        <br><br>

        <!-- 在input标签中添加一个id属性，外面有一个label显示文字并且设置label for的那个id -->
        <!-- 这样就能实现点击label的时候也能选择上这个按钮，如果多个input按钮使用相同的name可以实现单选的效果 -->
        单选框: <input type="radio" name="sex" id="man" checked><label for="man">男</label>
                <input type="radio" name="sex" id="woman"><label for="woman">女</label>
        <br><br>

        <!-- checkbox多选框 -->
        <input type="checkbox" checked>读书
        <input type="checkbox">旅游
        <input type="checkbox" checked>篮球
        <br><br>

        <!-- 上传文件 -->
        上传文件：<input type="file">
        <br><br>

        <!-- select下拉菜单 -->
        <select>
            <option>北京</option>
            <option>上海</option>
            <option selected>石家庄</option>
        </select>
        <br><br>

        <!-- 文本域textarea, css中设置文本域宽高和为不可拖拽大小，和焦点边框变蓝 -->
        <textarea></textarea>
        <br><br>

        <!-- submit, reset按钮需要在form表单域中才生效，否则不会提交和重置表格 -->
        <input type="submit" value="同意并注册">
        <input type="button" value="Button普通按钮">
        <input type="reset">
        <br><br>

    </form>
    
</body>
</html>